<script setup>
import { ref, defineAsyncComponent } from 'vue'
import FeatureTabsContainer from './FeatureTabsContainer.vue'
import KeyValueEditor from './panes/KeyValueEditor.vue'   // 你的键值小表单
// 两个演示面板（你可换成自己的）
const BaseFormPane = defineAsyncComponent(() => import('./panes/BaseFormPane.vue'))
const MailFormPane = defineAsyncComponent(() => import('./panes/MailFormPane.vue'))

/* —— 模拟 API —— */
const api = {
  getBaseCfg: async () => ({ siteName:'', logo:'', theme:'light' }),
  getMailCfg: async () => ({ host:'', port:465, user:'', pass:'' }),
  getQuick:   async () => ({ rows:[
    { key:'数据回收规则配置', value:'security/dataRecycle' },
    { key:'敏感数据规则配置', value:'security/sensitiveData' },
  ]}),
}
// 若你已在父组件里拿到 rows（ref），也可这样：
// const quickResp = ref({ rows: [] })
// onMounted(async()=>{ quickResp.value = await api.getQuick() })

const active = ref('quick')

const panes = [
  {
    key:'base', label:'设备基本信息',
    component: BaseFormPane,
    load: () => api.getBaseCfg(),         // 首次进入时加载一次
    // BaseFormPane 使用 v-model="modelValue" + @save，自然对接
  },
  {
    key:'mail', label:'设备组成信息',
    component: MailFormPane,
    load: () => api.getMailCfg(),
  },
  {
    key:'quick', label:'设备使用信息',
    component: KeyValueEditor,
    load: () => api.getQuick(),           // 返回 { rows: [...] }
    dataKey: 'rows',                       // 容器自动取 rows 丢给子组件
    // 如果子组件不是用 modelValue，而是 items：
    // propName: 'items'
  },
  {
    key:'append', label:'设备使用数据',
    component: KeyValueEditor,
    data: [ { key:'示例A', value:'/a' } ], // 直接给静态数组也行
  },
  {
    key:'weihu', label:'设备维护维修数据',
    component: KeyValueEditor,
    data: [ { key:'示例A', value:'/a' } ], // 直接给静态数组也行
  }
]
</script>

<template>
  <div class="page-bg">
    <FeatureTabsContainer
      v-model="active"
      :panes="panes"
      :keepAlive="true"
      :sticky="false"
      style="--ft-primary:#3E8CF0"
    />
  </div>
</template>

<style scoped>
.page-bg{ background:#f5f7fa; padding:12px; }
</style>
